<template>
	<p>array size: {{ tableDataSize }}</p>
	<p v-for="tableItem in tableData" :key="tableItem.id">
		{{ tableItem }}
	</p>

	<button @click="buttonClick">emit</button>
	<button @click="addList">addList</button>
	<button @click="delLast">delLast</button>
	<button @click="stopWatchHandler">stopWatchHandler</button>
	<button @click="restartWatchHandler">restartWatchHandler</button>
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
import { fetchList } from "@/apis/test";
export default defineComponent({
	name: "Comp",
	emits: ["myclick"],
	setup: (props, { emit, attrs, slots, expose }) => {
		const state = reactive({
			tableData: [{}],
		});

		let test: Array<any> = inject("test", []);

		const buttonClick = (): void => {
			emit("myclick", {
				...toRefs(state),
			});
		};
		let count = ref(2);
		const getList = async () => {
			fetchList(200).then(async (res: any) => {
				if (res?.code === 200) {
					state.tableData = [];
					state.tableData.push(...res.data);
					count.value = state.tableData.length;
				}
			});
		};
		const addList = (): void => {
			count.value++;
			state.tableData.push({
				id: count.value,
				name: "test" + count.value,
				age: count.value,
			});
		};
		const delLast = (): void => {
			count.value++;
			state.tableData.pop();
		};

		const tableDataSize = computed(() => state.tableData.length);
		let stopWatchRef = ref(
			watchEffect(() => {
				console.log("tableDataSize:", tableDataSize.value);
			})
		);
		const restartWatch = () => {
			console.log("stopWatchRef", stopWatchRef);

			stopWatchRef.value();
			stopWatchRef.value = watchEffect(() => {
				console.log("tableDataSize:", tableDataSize.value);
			});
		};
		onMounted(() => {
			getList();
		});
		return {
			...toRefs(state),
			addList,
			delLast,
			buttonClick,
			tableDataSize,
			stopWatchRef,
			restartWatch,
		};
	},
	methods: {
		stopWatchHandler() {
			this.stopWatchRef();
		},
		restartWatchHandler() {
			this.restartWatch();
		},
	},
});
</script>

<style>
</style>